<!DOCTYPE html>
{% from 'macros.html' import static_file with context %}

<html lang="en">
<head>
    {% block head %}
        {% block metas %}
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        {% endblock %}
        <title>{% block title %}Template - HelloFlask{% endblock %}</title>
        <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <style>
        :root {
                --alert-color: {{ alert_color }}
            }
        </style>
        {% block styles %}{% endblock %}
        {{ static_file('css', 'css/bootstrap.min.css') }}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
    {% endblock %}
</head>
<body>
    {% block nav %}
        <nav>
            <ul><li><a href="{{ url_for('index') }}">Home</a></li></ul>
        </nav>
    {% endblock %}
    <main>
        {% for message in get_flashed_messages() %}
            <div class="alert">{{ message }}</div>
        {% endfor %}
        {% block content %}{% endblock %}
    </main>
    <footer>
        {% block footer %}
            <small>
                 &copy; 2019 <a href="https://github.com/miniyk2012" title="Fork me on GitHub">GitHub</a> /
                <a href="https://www.jianshu.com/u/f855b56e9bcc" title="Jian Shu">简书</a>
            </small>
        {% endblock %}
    </footer>
    {% block scripts %}
        {{ static_file('js', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', local=False) }}
        {{ static_file('js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', local=False) }}
        {{ static_file('js', 'js/bootstrap.min.js') }}
    {% endblock %}
</body>
</html>